<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>仿bootcdn</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

      <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .div1{
            background-color:  #27AE60;
            width:100%;
            height: 60%;
            border: 0px solid seagreen;


        }
        img{
            width:100px;
            height:50px;
            margin-left: 150px;
        }
        a{
            color:white;
            text-decoration: none;

        }
        a:hover{
            text-decoration: none;
            color:whitesmoke;
        }
        .top_a{
            margin-left: 60%;

        }
        p.top_title1{
            color:whitesmoke;
            font-size:50px;
            text-align:center;
            text-shadow: 3px 3px 3px grey;
        }
        p.top_title2{
            color:white;
            font-size:25px;
            text-align:center;
        }

        p.top_title3{
            color:white;
            text-align:center;
        }
        .div2{

        }
        p{
            text-align: center;

        }
        input{
            text-align: center;
            width:50%;
            height:50px;
            font-size: 20px;
        }
        .div3{
            width:100%;
            height:50px;
            background-color: darkgrey;
            margin-top: 100px;
        }
        img.brand{
            margin-top: 5px;
            width:40px;
            height:40px;

        }
        .container{
            background-color: white;
            margin-top: 100px;
            /*border: 1px solid darkgrey;*/

        }
        /*.on:hover{*/
            /*display: block;*/
            /*background-color: darkgrey;*/
            /*padding:8px;*/
        /*}*/

        .center{
            border: 1px solid darkgrey;
            background-color: white;
        }

        .footer{
             background-color:  white;
            width:100%;
            height: 30%;
            border: 0px solid #27AE60;
        }

        .foot{
            background-color:#27AE60 ;
            width:100%;
        }
    </style>
  </head>
  <body>
  <div class="div1">
      <div class="row">
           <img src="ico_1.png">
          <span class="top_a">
              <a href="#" >API</a>&nbsp;&nbsp;&nbsp;
              <a href="#">博客</a>&nbsp;&nbsp;&nbsp;
              <a href="#">关于</a>
          </span>
            <div class="div2">
                    <p class="top_title1">BootCDN</p>
                    <p class="top_title2">稳定、快速、免费的前端开源项目 CDN 加速服务</p>
                    <p class="top_title3">共收录了 3382 个前端开源项目</p>

            </div>
          <div>
              <p><input placeholder="搜索开源库,例如jquery"></p>
          </div>
          <div class="div3 row">
                <a href=""><img class="brand" src="bootstrap.svg"></a>
              <a href=""><img class="brand" src="jquery.svg"></a>
          </div>

      </div>

  </div>
  <div class="container center">

             <!--<div class="row ">-->
                        <!--<div class="col-md-4">bootstrap</div>-->
                         <!--<div class="col-md-8">-->
                                  <!--bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>-->
                                  <!--*124952-->
                          <!--</div>-->
              <!--</div>-->

              <!--<div class="row ">-->
                                <!--<div class="col-md-4">bootstrap</div>-->
                                 <!--<div class="col-md-8">-->
                                          <!--bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>-->
                                          <!--*124952-->
                                  <!--</div>-->
               <!--</div>-->
                <div class="row">
              <div class=" col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>
          <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>

      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>

      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>

      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>


      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>


      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>


      <hr style="background-color: red;padding: 0px">
            <div class="row">
            <div class="col-md-4">
                  bootstrap
              </div>
              <div class="col-md-8">
                  bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目<br>
                  *124952
              </div>
                </div>
   </div>

<div class="footer">
    <div class="container foot">
        <div class="raw">
        <div class="  col-md-6  ">
            关于 BootCDN
BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。

自2013年10月31日上线以来已经为30多万家网站提供了稳定、可靠的免费 CDN 加速服务。

反馈或建议请发送邮件至：cdn@bootcss.com
        </div>
        <div class="  col-md-6  ">
            <div  class="  col-md-4">
            友情链接
Bootstrap中文网Ghost中国Laravel中文网jQuery中文文档Webpack中文网NPM中文网全栈课堂91PHPNode.js中文文档
            </div>
            <div  class="  col-md-2">
                我们用到的技术BootstrapGhostjQueryBabeljsLodashNode.
            </div>
        </div>
            </div>
        </div>
</div>



  </body>
</html>